<!DOCTYPE html>
<html lang="zh-cn">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>林枫天空</title>
  <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="css/loader.css">
  <link rel="icon" href="res/favicon.ico" type="image/x-icon">
  <style>

  </style>
</head>

<body>
  <!--  加载动画  -->
  <div class="loader" id="loader">
    <svg id="bubble" width="35vw" height="35vh" viewbox="0 0 100 100">
      <!-- 第一个气泡 -->
      <circle class="bubble" cx="20" cy="80" r="5" fill="rgba(255, 255, 255, 0.8)" />
      <!-- 第二个气泡 -->
      <circle class="bubble" cx="50" cy="90" r="8" fill="rgba(255, 255, 255, 0.8)" />
      <!-- 第三个气泡 -->
      <circle class="bubble" cx="80" cy="70" r="2" fill="rgba(255, 255, 255, 0.8)" />
      <!-- 第三个气泡 -->
      <circle class="bubble" cx="45" cy="60" r="1" fill="rgba(255, 255, 255, 0.8)" />
      <!-- 第三个气泡 -->
      <circle class="bubble" cx="35" cy="45" r="3" fill="rgba(255, 255, 255, 0.8)" />
      <!-- 第三个气泡 -->
      <circle class="bubble" cx="30" cy="52" r="6" fill="rgba(255, 255, 255, 0.8)" />
      <!-- 第三个气泡 -->
      <circle class="bubble" cx="60" cy="58" r="4" fill="rgba(255, 255, 255, 0.8)" />
      <!-- 第三个气泡 -->
      <circle class="bubble" cx="47" cy="61" r="7" fill="rgba(255, 255, 255, 0.8)" />
    </svg>
    <svg version="1.1" id="logo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
      viewbox="0 0 800 800" enable-background="new 0 0 800 800" xml:space="preserve">
      <!-- 右下角 -->
      <polygon id="srd" fill="#009FFD" points="643.1,708 491.98,708 380.27,522.45 371.07,537.42 477.98,715 647.52,715 " />
      <!-- 左下角 -->
      <polyline id="sld" fill="#009FFD"
        points="267.277,421.85 78.597,715 240.317,715 244.617,708 92.597,708 281.277,414.85 " />
      <!-- 左上角 -->
      <polygon id="slu" fill="#009FFD"
        points="130.91,103 135.31,110 286.05,110 390.73,285.57 399.94,270.45 300.05,103 " />
      <!-- 主体 -->
      <path id="smain" stroke-dasharray="2000 700" stroke-dashoffset="0" fill="transparent" d="M588.86,578.1c-8.33,6.22-18.67,9.9-29.86,9.9c-27.61,0-50-22.39-50-50c0-19.18,10.8-35.84,26.66-44.22
          	                l-59.82-94.79L658.27,116H496.16l-5.29,9h149.4L457.84,407.99l-14,7L626.27,132H486.58l-97.85,159.57L284.05,116H114.91
          	                l80.22,127.84c7.76-4.96,16.98-7.84,26.87-7.84c27.61,0,50,22.39,50,50c0,17.97-9.49,33.73-23.73,42.54l47.89,76.31L107.48,698
          	                H269.2l114.07-185.55L494.98,698h169.54L588.86,578.1z M224,682c-27.61,0-50-22.39-50-50s22.39-50,50-50s50,22.39,50,50
          	                S251.61,682,224,682z">
        <animate attributenname="stroke" values="currentColor;#009FFD;blue;currentColor" dur="1s" repeatcount="1" />
        <animate attributename="stroke-width" values="0;6;6;6;6;0" dur="1s" repeatcount="1" />
        <animate attributename="stroke-opacity" values="0;1;1;1;1;0" dur="1s" repeatcount="1" />
        <animate attributename="stroke-dashoffset" values="100;0" dur="1s" repeatcount="1" />
        <animate attributename="stroke-dasharray" values="0;100" dur="1s" repeatcount="1" />
      </path>
      <!-- 弧线 -->
      <path id="shd" fill="transparent"
        d="M259,647.903c0,16.62-15.897,30.097-35.5,30.097S188,664.523,188,647.903c0-0.301,0.007-0.602,0.021-0.903
  	                    c0.561,16.204,16.231,29.194,35.479,29.194s34.918-12.99,35.479-29.194C258.993,647.301,259,647.602,259,647.903z" />
    </svg>
    <svg id="progressSVG" width="45vw" height="10vh" viewbox="0 0 60 60">
      <!-- 百分比文字 -->
      <text class="percentage" id="progress" x="50%" y="45" text-anchor="middle">0%</text>
    </svg>
  </div>

  <!--  网站主体  -->
    <main class="main-content" id="main-content">
      <header class="nav-wrapper">
        <nav class="navbar">
            <a href="#" class="brand">林霖澐枫</a>
            <div class="nav-links">
                <a href="#" class="nav-link"><span>Home</span></a>
                <a href="#" class="nav-link"><span>Blog</span></a>
                <a href="#" class="nav-link"><span>Cloud</span></a>
                <a href="#" class="nav-link"><span>About</span></a>
                <a href="#" class="nav-link"><span>SkyBox</span></a>
            </div>
        </nav>
      </header>
      <div class="title">
          <h1>仰望星辰</h1>
          <h2>我已不再孤独</h2>
      </div>
      <svg id="sky" width="100%" height="100%"></svg>

        <footer class="footer">
            <p>版权所有 &copy; 2021</p>
        </footer>
    </main>

</body>
<script src="js/loader.js"></script>
<script src="js/main.js"></script>
<script src="js/jquery.min.js"></script>

</html>